<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<view class="grace-space-between" style="margin-top: 16rpx;padding: 0 24rpx;">
				<view class="grace-flex-center" style="background-image:url(../../static/jindutian.png);background-repeat: no-repeat; width: 230rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">1.卡号信息</text>
				</view>
				<view class="grace-flex-center" style="background-image:url(../../static/jindutiao1.png);background-repeat: no-repeat; width: 230rpx;height: 40rpx;background-size:contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">2.安全码</text>
				</view>
				<view class="grace-flex-center" style="background-image:url(../../static/jindutiao1.png);background-repeat: no-repeat; width: 230rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">3.还款日/账单日</text>
				</view>
			</view>
			<view style="margin-top: 35rpx;">
				<!-- reto('/pages/issuer_selection/issuer_selection?banck=信用卡') -->
				<view @tap="xuanzefakahang" class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">发卡行：</text>
					<text class="grace-ellipsis" style="position: relative; left: 70rpx; font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);">{{ fakahangname != '' ? fakahangname:'请选择发卡行'}}</text>
					<image src="../../static/jiantou.png" style="position: absolute;left: 650rpx; width: 20rpx;height: 35rpx;"></image>
				</view>
			</view>

			<view class="grace-flex-center" style="width: 750rpx;margin-top: 40rpx;" @tap="getIDCard()">
				<view>
					<image :src=" id_card_img.length>0 ? id_card_img : '../../static/youxiaoqi.png'" style=" width: 544rpx;height: 328rpx;"></image>
				</view>
			</view>

			<view @tap="getIDCard()" class="grace-rows grace-flex-center" style="margin-top: 25rpx;">
				<image src="../../static/xiangji.png" style="width: 40rpx;height: 40rpx;"></image>
				<text style="margin-left: 20rpx; font-size:23rpx;font-weight:400;color:rgba(51,51,51,1);">{{ xiangjishuoming }}</text>
			</view>

			<view style="margin-top: 35rpx;">
				<view class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">信用卡卡号：</text>
					<input v-model="xinyongkahao" placeholder="请输入信用卡号" style="margin-left: 30rpx;width: 500rpx;font-size: 24rpx;"
					 @blur="" />
				</view>

				<view class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">信用卡额度：</text>
					<input v-model="edu" @input="tianxieedu" placeholder="请输入信用卡额度" style="margin-left: 30rpx;width: 500rpx;font-size: 24rpx;" />
				</view>

				<view class="grace-rows grace-flex-vcenter" style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">有效期：</text>
					<input type='number' :focus='M_jujiao' maxlength='2' v-model="youxiaoqi_M" @input="youxiaoqi_js_M" placeholder="MM"
					 placeholder-style="text-align: center;" style="text-align: center; margin-left: 95rpx;width: 100rpx;border-bottom: #000000 solid 2rpx;" />
					<text style="margin-left: 20rpx; font-size: 60rpx;">/</text>
					<input type='number' :focus='Y_jujiao' maxlength='2' v-model="youxiaoqi_Y" @input="youxiaoqi_js_Y" placeholder="YY"
					 placeholder-style="text-align: center;" style="text-align: center;margin-left: 20rpx;width: 100rpx;border-bottom: #000000 solid 2rpx;" />
				</view>

				<view style="margin-top: 10rpx;margin-left: 30rpx;">
					<text style="font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);">*仅支持添加本人名下信用卡</text>
				</view>
			</view>
			<view>
				<button @tap="submit" :style="{background:button_color}" class="button_color">下一步</button>
			</view>
		</view>
	</gracePage>
</template>

<script>
	// #ifdef APP-PLUS
	const card = uni.requireNativePlugin('DC-CardRecognize');
	// #endif
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				
				id_card_img: '',
				card_img_id: '',
				fakahangid: '',
				fakahangname: '',
				xinyongkahao: '',
				youxiaoqi_M: '',
				youxiaoqi_Y: '',
				M_jujiao: false,
				Y_jujiao: false,
				show_youxiaoqi: '',
				Y_len: 0,
				xiangjishuoming: '请点击卡片上传图片',
				edu: '',
				types: ''
			}
		},



		onLoad: function(opt) {
			this.types = opt.types
			this.xiangjishuoming = '可点击卡面拍照识别';
		},
		components: {
			gracePage
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 发卡行页面跳转事件
			xuanzefakahang() {
				console.log(this.types)
				uni.$once('xuanzefakahang', this.querenfakahang);
				uni.navigateTo({
					url:'/pages/card/issuer_selection?banck=信用卡&types=' + this.types
				})
			},
			// 获取发卡行id，名称
			querenfakahang(data) {
				this.fakahangid = data.id,
				this.fakahangname = data.name
			},
			// 下一步
			submit() {
				if (this.fakahangname === '' || this.xinyongkahao === '' || this.youxiaoqi_M === '' || this.youxiaoqi_Y === '' || this.edu === ''|| this.fakahangname === '请选择发卡行') {
					uni.showToast({
						title:'请将信息填写完整',
						icon: 'none'
					})
				} else {
					var datas = {
						bank_name: this.fakahangname,
						bank_num: this.xinyongkahao,
						quota: this.edu,
						z_img: this.card_img_id,
						validity_moth: this.youxiaoqi_M,
						validity_year: this.youxiaoqi_Y
					}
					uni.setStorageSync('data_list',datas);
					uni.navigateTo({
						url:'/pages/card/add_credit_card2'
					})
				}
			},
			//填写额度
			tianxieedu: function(obj) {
				var edu = obj.detail.value;
				this.edu = edu;
			},
			youxiaoqi_js_M(val) {
				console.log(val)
				var vale = val.target.value;
				if (vale.length === 2) {
					this.M_jujiao = false;
					this.Y_jujiao = true;
				}
			},
			youxiaoqi_js_Y(val) {
				console.log(val)
				var vale = val.target.value;
				if (vale.length === 0 && this.Y_len === 1) {
					this.Y_jujiao = false;
					this.M_jujiao = true;
				}
				this.Y_len = vale.length;
			},
			// 检测卡号
			chaxun(e) {
				console.log(e);
				var value = e.detail.value
				var vm = this

				vm.req.mypost(
					vm.lochost + '/mytrunk/userapi/yanzhen', {
						card_num: value
					},
					function(res) {
						console.log(res);
						if (res.data.type !== '信用卡' || res.data.code == 200) {
							uni.showModal({
								title: '提示',
								content: '请核实该卡号是否有误或是否为信用卡',
								showCancel: false,
								confirmText: '我知道了',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}
					}
				)
			},
			// 上传银行卡照片
			getIDCard() {
				if (this.fakahangid === '') {
					uni.showToast({
						title:'请先选择发卡行喔！',
						icon: 'none'
					})
				} else {
					var vm = this
					this.UpFile('api/publicapi/upfile',function(res){
						console.log(res);
						if(res.code == 200){
							vm.id_card_img = res.data.quan_path;
							vm.card_img_id = res.data.id;
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},{width:544})
				}
			},
			isEmptyObject(obj) {
				for (var key in obj) {
					return false;
				}
				return true;
			}
		}
	}
</script>

<style>
	.button_color{
		margin-top: 70rpx; 
		width:500rpx;
		height:90rpx;
		/* background:#3187D5; */
		box-shadow:0px 2rpx 5rpx 0px rgba(67,67,67,0.3);
		border-radius:20rpx;
		font-size:32rpx;
		font-weight:400;
		color:rgba(255,255,255,1);
	}
</style>
